<template>
  <div class="main">
    <ul style="list-style-type: none" v-for="notic in notice">
      <li>
        <el-button
          @click="drawer1 = true"
          type="primary"
          style="margin-left: 16px;
          background-color:white; 
          color:black;
          border-color:white;"
        >
          <div class="I_left">{{notic.title}}</div>
          <div class="I_right">{{notic.createdTime}}</div>
		  

          <el-divider></el-divider>
        </el-button>
        <el-drawer
          :visible.sync="drawer1"
          :before-close="handleClose"
          :direction="direction"
          size="50%"
        >
          <span>
            <el-form class="detailed">
              <el-form-item>
                <a-card hoverable style="width: 500px;height:300px; margin:0 auto;"
                  >
				  <p>通知：{{notic.title}}</p>
                  <p>内容：{{notic.content}}</p>
				  <br><br><br>
				  <p>发布时间：{{notic.publushTime}}</p>
                </a-card>
              </el-form-item>
            </el-form>
          </span>
        </el-drawer>
      </li>
      
    </ul>
    <div class="I_button">
      <el-button type="primary" plain>上一页</el-button>
      <el-button type="primary" plain>下一页</el-button>
    </div>
  </div>
</template>

<script>
	import axios from 'axios'
export default {
  data() {
    return {
      drawer1: false,
	  notice:[{id:"",title:"李荣浩", publushTime:"",content:"",updatedTime:"",createdTime:""}],
      direction: 'rtl',
    };
  },
mounted() {
			//请求数据接口
			//方法一
			// var that=this;
			// axios.get("http://localhost:9003/emp/listAll").then(function(response){
			// 	console.log(response.data);
			// 	that.emps=response.data;
			//方法二
			this.list();
			
		},
     methods: {
      handleClose() {
		  this.drawer1=false
      },
	  list:function(){
	  	axios.get("http://localhost:9003/notice/listAll").then((response)=>{
	  		console.log(response.data[0]);
			this.notice=response.data
	  });
	  },
    }
};
</script>

<style scoped>
.main {
  width: 1200px;
  height: 600px;
  /*border: 1px solid black;*/
  margin-top: 20px;
  margin-left: 200px;
  list-style: none;
}
.main > ul > li {
  text-align: left;
  height: 50px;
}
.I_button {
    /* position: relative; */
    /* top: 10px; */
    margin-top: 62px;
}
.I_left {
  float: left;
  margin-right: 328px;
  margin-left: 88px;
}
.I_right {
  margin-left: 600px;
}
.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 24px 0;
}
</style>
